<template>
  <div class="notifications-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title-section">
          <h1 class="page-title">通知管理</h1>
          <p class="page-subtitle">管理系统通知、消息和提醒设置</p>
        </div>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleSendNotification">
          <el-icon><Bell /></el-icon>
          发送通知
        </el-button>
        <el-button @click="fetchNotifications">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-card">
        <!-- 通知类型标签页 -->
        <el-tabs v-model="activeTab" class="notification-tabs" @tab-change="handleTabChange">
          <el-tab-pane label="系统通知" name="system">
            <div class="notification-list">
              <el-table :data="systemNotifications" class="notification-table" v-loading="loading">
                <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
                <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
                <el-table-column prop="messageType" label="类型" width="120">
                  <template #default="{ row }">
                    <el-tag :type="getNotificationTypeTag(row.messageType)" size="small">
                      {{ getNotificationTypeText(row.messageType) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="messageLevel" label="级别" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getMessageLevelTag(row.messageLevel)" size="small">
                      {{ getMessageLevelText(row.messageLevel) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.status === 1 ? 'success' : 'warning'" size="small">
                      {{ row.status === 1 ? '已读' : '未读' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                  <template #default="{ row }">
                    {{ formatDate(row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                  <template #default="{ row }">
                    <el-button size="small" @click="viewNotification(row)">
                      <el-icon><View /></el-icon>
                      查看
                    </el-button>
                    <el-button 
                      v-if="row.status === 0" 
                      size="small" 
                      type="primary" 
                      @click="markAsRead(row.id)"
                    >
                      标记已读
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteNotification(row)">
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="消息模板" name="template">
            <div class="template-header">
              <el-button type="primary" @click="showTemplateDialog = true">
                <el-icon><Plus /></el-icon>
                新增模板
              </el-button>
            </div>
            <div class="template-list">
              <el-table :data="messageTemplates" class="template-table" v-loading="loading">
                <el-table-column prop="templateName" label="模板名称" min-width="150" show-overflow-tooltip />
                <el-table-column prop="templateCode" label="模板编码" min-width="120" show-overflow-tooltip />
                <el-table-column prop="templateType" label="类型" width="120">
                  <template #default="{ row }">
                    <el-tag :type="getTemplateTypeTag(row.templateType)" size="small">
                      {{ getTemplateTypeText(row.templateType) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="messageLevel" label="级别" width="100">
                  <template #default="{ row }">
                    <el-tag :type="getMessageLevelTag(row.messageLevel)" size="small">
                      {{ getMessageLevelText(row.messageLevel) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="templateContent" label="模板内容" min-width="300" show-overflow-tooltip />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
                      {{ row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                  <template #default="{ row }">
                    {{ formatDate(row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="250" fixed="right">
                  <template #default="{ row }">
                    <el-button size="small" @click="editTemplate(row)">
                      <el-icon><Edit /></el-icon>
                      编辑
                    </el-button>
                    <el-button size="small" type="success" @click="testTemplate(row)">
                      测试
                    </el-button>
                    <el-button 
                      v-if="row.status === 0" 
                      size="small" 
                      type="warning" 
                      @click="enableTemplate(row.id)"
                    >
                      启用
                    </el-button>
                    <el-button 
                      v-else 
                      size="small" 
                      type="info" 
                      @click="disableTemplate(row.id)"
                    >
                      禁用
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteTemplate(row)">
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="通知设置" name="settings">
            <div class="settings-content">
              <el-form :model="notificationSettings" label-width="120px" class="settings-form">
                <el-form-item label="系统通知">
                  <el-switch v-model="notificationSettings.systemNotification" />
                </el-form-item>
                <el-form-item label="邮件通知">
                  <el-switch v-model="notificationSettings.emailNotification" />
                </el-form-item>
                <el-form-item label="短信通知">
                  <el-switch v-model="notificationSettings.smsNotification" />
                </el-form-item>
                <el-form-item label="桌面通知">
                  <el-switch v-model="notificationSettings.desktopNotification" />
                </el-form-item>
                <el-form-item label="通知频率">
                  <el-select v-model="notificationSettings.frequency" placeholder="请选择通知频率">
                    <el-option label="实时" value="realtime" />
                    <el-option label="每小时" value="hourly" />
                    <el-option label="每天" value="daily" />
                    <el-option label="每周" value="weekly" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="saveSettings">保存设置</el-button>
                  <el-button @click="resetSettings">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            layout="total, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="currentPage"
            :page-size="pageSize"
            background
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>

    <!-- 发送通知对话框 -->
    <el-dialog
      title="发送通知"
      v-model="sendDialogVisible"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="sendForm" :rules="sendFormRules" ref="sendFormRef" label-width="100px">
        <el-form-item label="通知类型" prop="messageType" required>
          <el-select v-model="sendForm.messageType" placeholder="请选择通知类型" style="width: 100%">
            <el-option label="系统消息" value="SYSTEM" />
            <el-option label="用户消息" value="USER" />
            <el-option label="通知消息" value="NOTICE" />
          </el-select>
        </el-form-item>
        <el-form-item label="消息级别" prop="messageLevel" required>
          <el-select v-model="sendForm.messageLevel" placeholder="请选择消息级别" style="width: 100%">
            <el-option label="信息" value="INFO" />
            <el-option label="警告" value="WARNING" />
            <el-option label="错误" value="ERROR" />
            <el-option label="成功" value="SUCCESS" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title" required>
          <el-input v-model="sendForm.title" placeholder="请输入通知标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content" required>
          <el-input
            v-model="sendForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入通知内容"
          />
        </el-form-item>
        <el-form-item label="接收者" prop="receiverId" required>
          <el-input v-model="sendForm.receiverId" placeholder="请输入接收者ID" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sendDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitSendNotification" :loading="sending">
            发送
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 模板编辑对话框 -->
    <el-dialog
      title="消息模板"
      v-model="showTemplateDialog"
      width="700px"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="templateForm" :rules="templateFormRules" ref="templateFormRef" label-width="100px">
        <el-form-item label="模板编码" prop="templateCode" required>
          <el-input v-model="templateForm.templateCode" placeholder="请输入模板编码" />
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName" required>
          <el-input v-model="templateForm.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="模板标题" prop="templateTitle" required>
          <el-input v-model="templateForm.templateTitle" placeholder="请输入模板标题" />
        </el-form-item>
        <el-form-item label="模板类型" prop="templateType" required>
          <el-select v-model="templateForm.templateType" placeholder="请选择模板类型" style="width: 100%">
            <el-option label="系统模板" value="SYSTEM" />
            <el-option label="用户模板" value="USER" />
            <el-option label="通知模板" value="NOTICE" />
          </el-select>
        </el-form-item>
        <el-form-item label="消息级别" prop="messageLevel" required>
          <el-select v-model="templateForm.messageLevel" placeholder="请选择消息级别" style="width: 100%">
            <el-option label="信息" value="INFO" />
            <el-option label="警告" value="WARNING" />
            <el-option label="错误" value="ERROR" />
            <el-option label="成功" value="SUCCESS" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板内容" prop="templateContent" required>
          <el-input
            v-model="templateForm.templateContent"
            type="textarea"
            :rows="6"
            placeholder="请输入模板内容，支持变量占位符如 {name}、{time} 等"
          />
        </el-form-item>
        <el-form-item label="模板描述" prop="description">
          <el-input
            v-model="templateForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入模板描述"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="templateForm.status" :active-value="1" :inactive-value="0" />
          <span style="margin-left: 8px; color: var(--el-text-color-secondary);">
            {{ templateForm.status === 1 ? '启用' : '禁用' }}
          </span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showTemplateDialog = false">取消</el-button>
          <el-button type="primary" @click="submitTemplate" :loading="templateSaving">
            {{ isEditTemplate ? '更新' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 模板测试对话框 -->
    <el-dialog
      title="测试模板"
      v-model="testTemplateDialogVisible"
      width="500px"
      center
    >
      <el-form :model="testForm" label-width="100px">
        <el-form-item label="测试参数">
          <el-input
            v-model="testForm.params"
            type="textarea"
            :rows="4"
            placeholder="请输入JSON格式的测试参数，如：{'name': '张三', 'time': '2024-01-01'}"
          />
        </el-form-item>
      </el-form>
      <div v-if="testResult" class="test-result">
        <h4>渲染结果：</h4>
        <div class="result-content">{{ testResult }}</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="testTemplateDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="renderTemplate">渲染测试</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Bell, Refresh, Plus, Edit, Delete, View } from '@element-plus/icons-vue'
import { messageApi, notificationApi, messageTemplateApi } from '@/api/index.js'
import { useUserStore } from '@/stores/user.js'

// 用户状态
const userStore = useUserStore()
const currentUserId = computed(() => userStore.user?.id || 1)

// 响应式数据
const activeTab = ref('system')
const loading = ref(false)
const sending = ref(false)
const templateSaving = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 通知数据
const systemNotifications = ref([])
const messageTemplates = ref([])

// 通知设置
const notificationSettings = reactive({
  systemNotification: true,
  emailNotification: false,
  smsNotification: false,
  desktopNotification: true,
  frequency: 'realtime'
})

// 发送通知对话框
const sendDialogVisible = ref(false)
const sendForm = reactive({
  messageType: '',
  messageLevel: '',
  title: '',
  content: '',
  receiverId: ''
})

const sendFormRules = {
  messageType: [{ required: true, message: '请选择通知类型', trigger: 'change' }],
  messageLevel: [{ required: true, message: '请选择消息级别', trigger: 'change' }],
  title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
  receiverId: [{ required: true, message: '请输入接收者ID', trigger: 'blur' }]
}

const sendFormRef = ref()

// 模板编辑对话框
const showTemplateDialog = ref(false)
const isEditTemplate = ref(false)
const templateForm = reactive({
  id: null,
  templateCode: '',
  templateName: '',
  templateTitle: '',
  templateContent: '',
  templateType: '',
  messageLevel: '',
  description: '',
  status: 1
})

const templateFormRules = {
  templateCode: [{ required: true, message: '请输入模板编码', trigger: 'blur' }],
  templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  templateTitle: [{ required: true, message: '请输入模板标题', trigger: 'blur' }],
  templateType: [{ required: true, message: '请选择模板类型', trigger: 'change' }],
  messageLevel: [{ required: true, message: '请选择消息级别', trigger: 'change' }],
  templateContent: [{ required: true, message: '请输入模板内容', trigger: 'blur' }]
}

const templateFormRef = ref()

// 模板测试对话框
const testTemplateDialogVisible = ref(false)
const currentTestTemplate = ref(null)
const testForm = reactive({
  params: ''
})
const testResult = ref('')

// 获取通知类型标签
const getNotificationTypeTag = (type) => {
  const typeMap = {
    'SYSTEM': 'primary',
    'USER': 'success',
    'NOTICE': 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取通知类型文本
const getNotificationTypeText = (type) => {
  const typeMap = {
    'SYSTEM': '系统消息',
    'USER': '用户消息',
    'NOTICE': '通知消息'
  }
  return typeMap[type] || '未知'
}

// 获取模板类型标签
const getTemplateTypeTag = (type) => {
  const typeMap = {
    'SYSTEM': 'primary',
    'USER': 'success',
    'NOTICE': 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取模板类型文本
const getTemplateTypeText = (type) => {
  const typeMap = {
    'SYSTEM': '系统模板',
    'USER': '用户模板',
    'NOTICE': '通知模板'
  }
  return typeMap[type] || '未知'
}

// 获取消息级别标签
const getMessageLevelTag = (level) => {
  const levelMap = {
    'INFO': 'info',
    'WARNING': 'warning',
    'ERROR': 'danger',
    'SUCCESS': 'success'
  }
  return levelMap[level] || 'info'
}

// 获取消息级别文本
const getMessageLevelText = (level) => {
  const levelMap = {
    'INFO': '信息',
    'WARNING': '警告',
    'ERROR': '错误',
    'SUCCESS': '成功'
  }
  return levelMap[level] || '未知'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取通知列表
const fetchNotifications = async () => {
  loading.value = true
  try {
    const response = await messageApi.getReceivedMessages({
      receiverId: currentUserId.value,
      current: currentPage.value,
      size: pageSize.value
    })
    
    if (response.code === 200 && response.data) {
      systemNotifications.value = response.data.records || []
      total.value = response.data.total || 0
    } else {
      systemNotifications.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('获取通知列表失败: ' + error.message)
    systemNotifications.value = []
  } finally {
    loading.value = false
  }
}

// 获取消息模板
const fetchTemplates = async () => {
  loading.value = true
  try {
    const response = await messageTemplateApi.getTemplates({
      current: currentPage.value,
      size: pageSize.value
    })
    
    if (response.code === 200 && response.data) {
      messageTemplates.value = response.data.records || []
      total.value = response.data.total || 0
    } else {
      messageTemplates.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('获取模板列表失败: ' + error.message)
    messageTemplates.value = []
  } finally {
    loading.value = false
  }
}

// 查看通知
const viewNotification = (notification) => {
  ElMessage.info(`查看通知: ${notification.title}`)
}

// 标记已读
const markAsRead = async (messageId) => {
  try {
    const response = await messageApi.markAsRead(messageId, currentUserId.value)
    if (response.code === 200) {
      ElMessage.success('标记成功')
      fetchNotifications()
    } else {
      ElMessage.error(response.message || '标记失败')
    }
  } catch (error) {
    ElMessage.error('标记失败: ' + error.message)
  }
}

// 删除通知
const deleteNotification = async (notification) => {
  try {
    await ElMessageBox.confirm(`确定要删除通知 "${notification.title}" 吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await messageApi.deleteMessage(notification.id, currentUserId.value)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchNotifications()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}

// 编辑模板
const editTemplate = (template) => {
  isEditTemplate.value = true
  Object.assign(templateForm, template)
  showTemplateDialog.value = true
}

// 测试模板
const testTemplate = (template) => {
  currentTestTemplate.value = template
  testForm.params = '{"name": "测试用户", "time": "2024-01-01"}'
  testResult.value = ''
  testTemplateDialogVisible.value = true
}

// 渲染模板
const renderTemplate = async () => {
  if (!currentTestTemplate.value) return
  
  try {
    let params = {}
    if (testForm.params) {
      try {
        params = JSON.parse(testForm.params)
      } catch (e) {
        ElMessage.error('参数格式错误，请输入有效的JSON格式')
        return
      }
    }
    
    const response = await messageTemplateApi.renderTemplate(currentTestTemplate.value.templateCode, params)
    if (response.code === 200) {
      testResult.value = response.data
    } else {
      ElMessage.error(response.message || '渲染失败')
    }
  } catch (error) {
    ElMessage.error('渲染失败: ' + error.message)
  }
}

// 启用模板
const enableTemplate = async (templateId) => {
  try {
    const response = await messageTemplateApi.enableTemplate(templateId)
    if (response.code === 200) {
      ElMessage.success('启用成功')
      fetchTemplates()
    } else {
      ElMessage.error(response.message || '启用失败')
    }
  } catch (error) {
    ElMessage.error('启用失败: ' + error.message)
  }
}

// 禁用模板
const disableTemplate = async (templateId) => {
  try {
    const response = await messageTemplateApi.disableTemplate(templateId)
    if (response.code === 200) {
      ElMessage.success('禁用成功')
      fetchTemplates()
    } else {
      ElMessage.error(response.message || '禁用失败')
    }
  } catch (error) {
    ElMessage.error('禁用失败: ' + error.message)
  }
}

// 删除模板
const deleteTemplate = async (template) => {
  try {
    await ElMessageBox.confirm(`确定要删除模板 "${template.templateName}" 吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await messageTemplateApi.deleteTemplate(template.id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchTemplates()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}

// 发送通知
const handleSendNotification = () => {
  sendForm.messageType = ''
  sendForm.messageLevel = ''
  sendForm.title = ''
  sendForm.content = ''
  sendForm.receiverId = ''
  sendDialogVisible.value = true
}

// 提交发送通知
const submitSendNotification = async () => {
  try {
    await sendFormRef.value.validate()
    
    sending.value = true
    const response = await messageApi.sendMessage({
      ...sendForm,
      senderId: currentUserId.value
    })
    
    if (response.code === 200) {
      ElMessage.success('通知发送成功')
      sendDialogVisible.value = false
      fetchNotifications()
    } else {
      ElMessage.error(response.message || '发送失败')
    }
  } catch (error) {
    if (error !== false) {
      ElMessage.error('发送失败: ' + error.message)
    }
  } finally {
    sending.value = false
  }
}

// 提交模板
const submitTemplate = async () => {
  try {
    await templateFormRef.value.validate()
    
    templateSaving.value = true
    let response
    
    if (isEditTemplate.value) {
      response = await messageTemplateApi.updateTemplate(templateForm)
    } else {
      response = await messageTemplateApi.createTemplate(templateForm)
    }
    
    if (response.code === 200) {
      ElMessage.success(isEditTemplate.value ? '更新成功' : '创建成功')
      showTemplateDialog.value = false
      resetTemplateForm()
      fetchTemplates()
    } else {
      ElMessage.error(response.message || (isEditTemplate.value ? '更新失败' : '创建失败'))
    }
  } catch (error) {
    if (error !== false) {
      ElMessage.error((isEditTemplate.value ? '更新失败' : '创建失败') + ': ' + error.message)
    }
  } finally {
    templateSaving.value = false
  }
}

// 重置模板表单
const resetTemplateForm = () => {
  Object.assign(templateForm, {
    id: null,
    templateCode: '',
    templateName: '',
    templateTitle: '',
    templateContent: '',
    templateType: '',
    messageLevel: '',
    description: '',
    status: 1
  })
  isEditTemplate.value = false
  templateFormRef.value?.resetFields()
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('设置保存成功')
}

// 重置设置
const resetSettings = () => {
  notificationSettings.systemNotification = true
  notificationSettings.emailNotification = false
  notificationSettings.smsNotification = false
  notificationSettings.desktopNotification = true
  notificationSettings.frequency = 'realtime'
  ElMessage.info('设置已重置')
}

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  if (activeTab.value === 'system') {
    fetchNotifications()
  } else if (activeTab.value === 'template') {
    fetchTemplates()
  }
}

// 监听标签页变化
const handleTabChange = (tab) => {
  currentPage.value = 1
  if (tab === 'system') {
    fetchNotifications()
  } else if (tab === 'template') {
    fetchTemplates()
  }
}

onMounted(() => {
  fetchNotifications()
})
</script>

<style scoped>
.notifications-page {
  padding: 24px;
  background: var(--el-bg-color-page);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 24px;
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: var(--el-box-shadow-light);
}

.header-content {
  flex: 1;
}

.page-title-section {
  margin-bottom: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 主要内容区域 */
.main-content {
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: var(--el-box-shadow-light);
  overflow: hidden;
}

.content-card {
  padding: 24px;
}

/* 标签页样式 */
.notification-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
}

.notification-tabs :deep(.el-tabs__nav-wrap) {
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.notification-tabs :deep(.el-tabs__item) {
  color: var(--el-text-color-regular);
  font-weight: 500;
}

.notification-tabs :deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
}

/* 模板头部 */
.template-header {
  margin-bottom: 20px;
}

/* 表格样式 */
.notification-table,
.template-table {
  margin-bottom: 20px;
}

.notification-table :deep(.el-table),
.template-table :deep(.el-table) {
  border: none;
  background: transparent;
}

.notification-table :deep(.el-table__header),
.template-table :deep(.el-table__header) {
  background: var(--el-fill-color-light);
}

.notification-table :deep(.el-table__header .el-table__cell),
.template-table :deep(.el-table__header .el-table__cell) {
  background: transparent;
  border: none;
  color: var(--el-text-color-primary);
  font-weight: 600;
  padding: 16px 0;
}

.notification-table :deep(.el-table__row),
.template-table :deep(.el-table__row) {
  background: transparent;
  border: none;
}

.notification-table :deep(.el-table__row:hover),
.template-table :deep(.el-table__row:hover) {
  background: var(--el-fill-color-lighter);
}

.notification-table :deep(.el-table__cell),
.template-table :deep(.el-table__cell) {
  border: none;
  padding: 16px 0;
  background: transparent;
}

.notification-table :deep(.el-table__inner-wrapper),
.template-table :deep(.el-table__inner-wrapper) {
  border: none;
}

.notification-table :deep(.el-button),
.template-table :deep(.el-button) {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notification-table :deep(.el-button--primary),
.template-table :deep(.el-button--primary) {
  background: var(--el-color-primary);
  color: white;
}

.notification-table :deep(.el-button--primary:hover),
.template-table :deep(.el-button--primary:hover) {
  background: var(--el-color-primary-dark-2);
}

.notification-table :deep(.el-button--success),
.template-table :deep(.el-button--success) {
  background: var(--el-color-success);
  color: white;
}

.notification-table :deep(.el-button--success:hover),
.template-table :deep(.el-button--success:hover) {
  background: var(--el-color-success-dark-2);
}

.notification-table :deep(.el-button--danger),
.template-table :deep(.el-button--danger) {
  background: var(--el-color-danger);
  color: white;
}

.notification-table :deep(.el-button--danger:hover),
.template-table :deep(.el-button--danger:hover) {
  background: var(--el-color-danger-dark-2);
}

.notification-table :deep(.el-button .el-icon),
.template-table :deep(.el-button .el-icon) {
  font-size: 14px;
}

/* 设置表单样式 */
.settings-content {
  padding: 20px 0;
}

.settings-form {
  max-width: 500px;
}

.settings-form :deep(.el-form-item__label) {
  color: var(--el-text-color-primary);
  font-weight: 500;
}

.settings-form :deep(.el-input__inner),
.settings-form :deep(.el-textarea__inner) {
  border-color: var(--el-border-color-light);
  background-color: var(--el-fill-color-light);
  color: var(--el-text-color-regular);
  border-radius: 6px;
}

.settings-form :deep(.el-input__inner:focus),
.settings-form :deep(.el-textarea__inner:focus) {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
}

.settings-form :deep(.el-select .el-input__inner) {
  border-color: var(--el-border-color-light);
  background-color: var(--el-fill-color-light);
  border-radius: 6px;
}

.settings-form :deep(.el-select .el-input__inner:focus) {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 对话框样式 */
.dialog-footer {
  padding: 16px 20px 20px 20px;
  border-top: 1px solid var(--el-border-color-lighter);
  text-align: right;
  background: var(--el-bg-color);
}

.dialog-footer :deep(.el-button) {
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  margin-left: 12px;
  border: none;
}

.dialog-footer :deep(.el-button--primary) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.dialog-footer :deep(.el-button--primary:hover) {
  background-color: var(--el-color-primary-dark-2);
  border-color: var(--el-color-primary-dark-2);
}

/* 测试结果样式 */
.test-result {
  margin-top: 20px;
  padding: 16px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
}

.test-result h4 {
  margin: 0 0 12px 0;
  color: var(--el-text-color-primary);
  font-size: 14px;
  font-weight: 600;
}

.result-content {
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .content-card {
    padding: 16px;
  }
}
</style> 